<template>
  <div>
    <div class="max-w-7xl mx-auto p-3 sm:p-6 bg-white shadow-md rounded-lg">
      <div class="flex flex-col sm:flex-row items-center sm:items-start sm:space-x-6">
        <!-- 用户头像和姓名 -->
        <div class="flex flex-col items-center justify-center mb-4 cursor-pointer" @click="handleOpenHistory">
          <div class="mr-4">
            <LolAvartar :size="60" :iconId="recordData.profileIconId" />
          </div>
          <div class="">
            <span>隐藏分</span>
            <span class="text-purple-600">{{ loading ? '查询中' : dataRankEloNum }}</span>
          </div>
          <h2 class="text-2xl font-semibold text-gray-800">{{ recordData.name }}</h2>
        </div>
        <!-- 用户信息 -->
        <div class="flex-1">
          <div class="flex flex-wrap gap-4">
            <div
              v-for="(item, index) in descriptionItems"
              :key="index"
              class="flex items-center mb-2 text-sm"
            >
              <dt class="font-medium text-gray-600 whitespace-nowrap">{{ item.label }}:</dt>
              <dd class="text-blue-500 ml-2" v-html="item.value"></dd>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="max-w-7xl mx-auto mt-4 bg-white shadow-md rounded-lg">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 p-3 sm:p-6">
        <div class="flex" v-for="(item, index) in battleTypes" :key="index">
          <div class="w-20 text-sm">
            <div>{{ item.title }}</div>
            <div class="text-blue-500 mt-1">{{ item.totalText }}</div>
          </div>

          <el-progress
            class="flex-1 ml-1"
            :text-inside="true"
            :stroke-width="28"
            :percentage="item.rate"
          >
            <span
              cla
              v-for="(text, textIndex) in item.additionalText"
              :key="textIndex"
              class="ml-2"
              v-html="text"
            >
            </span>
          </el-progress>
        </div>
      </div>

      <div class="w-full bg-gray-400 text-center text-white text-sm p-1">排位</div>

      <div class="grid py-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
        <template v-for="(item, index) in recordData?.battleInfo?.mapOneInfoList">
          <div
            class="flex items-center p-2 mx-3 flex-wrap bg-gray-50 text-sm"
            v-if="index > 1 && item.total > 10"
            :key="index"
          >
            <div class="flex items-center w-full">
              <img
                class="w-6 h-6 rounded-lg"
                :src="`/image/${item.tier?.slice(0, 2)}.png`"
                alt=""
              />
              <span class="ml-2"> {{ item.type }} </span>
              <span
                class="ml-2 text-white px-1 rounded"
                :style="{ background: getRanks(item.tier) }"
                >{{ item.tier }}</span
              >
            </div>

            <div class="mt-1">
              <span>
                总场次
                <span class="text-blue-500">{{ item.total }}</span>
                场
              </span>

              <span class="mr-3">
                胜点
                <span class="text-blue-500">{{ item.winPoint }}</span>
              </span>
              <span>
                胜率
                <span class="text-blue-500">{{ item.rate }}</span>
                %
              </span>
            </div>
          </div>
        </template>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref, computed, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
import LolAvartar from '@/components/LolAvartar.vue'
import { getRankEloInfo } from '@/axios/api.js'
import { getSign } from '@/utils/auth'

const props = defineProps({
  recordData: Object
})
const { recordData } = toRefs(props)

watch(props, () => {
  console.log('recordData', recordData)
  if (recordData.value.battleInfo) {
    getRankElo(recordData.value.battleInfo)
  }
})

const dataRankEloNum = ref('')
const loading = ref(false)
async function getRankElo(data) {
  try {
    loading.value = true
    const res = await getRankEloInfo({
      openId: data.openId,
      areaId: data.areaId,
      ...getSign()
    })
    console.log('我隐藏分呢', res)
    if (!res?.data) {
      ElMessage({
        message: '查询数据失败，请重试',
        type: 'error'
      })
      return
    }
    dataRankEloNum.value = res.data.dataRankEloNum
  } catch (error) {
    console.log('错误', error)
  } finally {
    loading.value = false
  }
}

const ranks = [
  { name: '黑铁', color: '#6A4F4B' },
  { name: '青铜', color: '#CD7F32' },
  { name: '白银', color: '#c3d4c9' },
  { name: '黄金', color: '#FFD700' },
  { name: '铂金', color: '#40E0D0' },
  { name: '翡翠', color: '#00916E' },
  { name: '钻石', color: '#338055' },
  { name: '大师', color: '#A250F5' },
  { name: '宗师', color: '#800080' },
  { name: '王者', color: '#FF0000' }
]

const getRanks = (tier) => {
  return ranks.find((item) => item.name === tier.slice(0, 2))?.color
}

const descriptionItems = computed(() => [
  { label: '等级', value: recordData.value.level },
  // {
  //   label: '最高段位',
  //   value: recordData.value.battleInfo?.seasonInfoMap?.maxTier
  //     ? `${recordData.value.battleInfo?.seasonInfoMap?.maxTier}${recordData.value.battleInfo?.seasonInfoMap?.maxQueue}`
  //     : 'N/A'
  // },
  // { label: '综合评价', value: recordData.value.message },
  // { label: '总局数', value: recordData.value.totalGames },
  // { label: '赢', value: recordData.value.wins },
  // { label: '输', value: recordData.value.losses },
  // { label: '胜率', value: recordData.value.rate + '%' },
  // { label: 'MVP', value: recordData.value.mvp },
  // { label: 'SVP', value: recordData.value.svp },
  // { label: '开黑次数', value: recordData.value.blackoutTimes },
  // { label: '有效场次', value: recordData.value.totalGames },
  // { label: '首场时间', value: recordData.value.startTime },
  // {
  //   label: '开黑胜率',
  //   value: recordData.value.blackoutTimes
  //     ? `${((recordData.value.blackoutWins / recordData.value.blackoutTimes) * 100).toFixed(2)}%`
  //     : 'N/A'
  // },
  // { label: '二黑', value: recordData.value.twoBlack },
  // {
  //   label: '二黑胜率',
  //   value: recordData.value.twoBlack
  //     ? `${((recordData.value.twoBlackWins / recordData.value.twoBlack) * 100).toFixed(2)}%`
  //     : 'N/A'
  // },
  // { label: '三黑', value: recordData.value.threeBlack },
  // {
  //   label: '三黑胜率',
  //   value: recordData.value.threeBlack
  //     ? `${((recordData.value.threeBlackWins / recordData.value.threeBlack) * 100).toFixed(2)}%`
  //     : 'N/A'
  // },
  // { label: '四黑', value: recordData.value.fourBlack },
  // {
  //   label: '四黑胜率',
  //   value: recordData.value.fourBlack
  //     ? `${((recordData.value.fourBlackWins / recordData.value.fourBlack) * 100).toFixed(2)}%`
  //     : 'N/A'
  // },
  // { label: '五黑', value: recordData.value.fiveBlack },
  // {
  //   label: '五黑胜率',
  //   value: recordData.value.fiveBlack
  //     ? `${((recordData.value.fiveBlackWins / recordData.value.fiveBlack) * 100).toFixed(2)}%`
  //     : 'N/A'
  // },
  { label: '在线时间', value: recordData.value.onlineInfo },
  { label: '战绩隐藏', value: recordData.value.publicInfo },
  // {
  //   label: '全部大乱斗',
  //   value: recordData.value.allChaotic
  //     ? `${recordData.value.allChaotic.wins - recordData.value.allChaotic.losses}净胜场 / ${recordData.value.allChaotic.wins} 胜 / ${recordData.value.allChaotic.losses} 负 / ${recordData.value.allChaotic.rate} 胜率`
  //     : 'N/A'
  // }
])

const battleTypes = computed(() => [
  {
    title: '总局数',
    totalText: `${recordData.value?.battleInfo?.seasonInfoMap?.totalGames}场`,
    rate: Number(recordData.value?.battleInfo?.seasonInfoMap?.totalRate?.replace('%', '')),
    additionalText: [`胜${recordData.value.battleInfo?.seasonInfoMap?.totalRate}`]
  },
  {
    title: '匹配赛',
    totalText: `${recordData.value.allMatching?.total}场`,
    rate: recordData.value.allMatching?.rate,
    status: 'exception',
    additionalText: [
      `净胜场${recordData.value.allMatching?.wins - recordData.value.allMatching?.losses}`,
      `胜率${recordData.value.allMatching?.rate}%`
    ]
  },
  {
    title: '大乱斗',
    totalText: `${recordData.value.allChaotic?.total}场`,
    rate: recordData.value.allChaotic?.rate,
    status: 'warning',
    additionalText: [
      `净胜场${recordData.value.allChaotic?.wins - recordData.value.allChaotic?.losses}`,
      `胜率${recordData.value.allChaotic?.rate}%`
    ]
  },
  {
    title: '排位',
    totalText: `${recordData.value.rankingData?.total}场`,
    rate: recordData.value.rankingData?.rate,
    status: 'warning',
    additionalText: [
      `净胜场${recordData.value.rankingData?.netWin}`,
      `胜率${recordData.value.rankingData?.rate}%`
    ]
  },
])

const router = useRouter()

function handleOpenHistory() {
  localStorage.setItem('userHistory', JSON.stringify(recordData.value))
  router.push('/history')
}
</script>
<style lang="scss" scoped>
:deep(.el-progress-bar__innerText) {
  font-weight: 600;
}
:deep(.el-progress-bar__outer) {
  border-radius: 0 !important;
  background: #8ed3de;
}
:deep(.el-progress-bar__inner) {
  border-radius: 0 !important;
  background: linear-gradient(to right, rgba(0, 141, 173, 1), rgba(0, 225, 162, 1));
}
</style>
